<!--
@file：固定资产管理-资产管理
@time：2019-09-24
@author：chenj
-->
<template>
    <div class="main-wrapper manage-wrapper ">
        <div class="page-header">
            <div class="clearfix title-box">
                <span class="fl fz20">资产管理</span>
                <div class="fr clearfix icon-box">
                    <img class="mr20 fl cursor_p" :src="hoverIndex != index ? img.icon : img.iconActive"
                         v-for="(img, index) in imgList" :key="img.id" @mouseenter="mouseEnter(index)"
                         @mouseleave="mouseLeave(-1)" @click="iconClick(img.id)">
                    <el-button class="add-btn" icon="el-icon-plus" @click="creatAsset">资产</el-button>
                </div>
            </div>
            <div class="nav-box">
                <div class="nav-list pl20">
                    <span class="nav-item cursor_p fz16" v-for="(item, index) in navList" :key="item.id"
                          :class="currentNav == index ? 'active-nav' : ''"
                          @click="switchNav(index)">{{item.name}}</span>
                </div>
            </div>
        </div>
        <div class="main-content p20 w1200 m20">
            <div class="content-box">
                <div class="table-box" v-if="currentNav == 0">
                    <template>
                        <el-table class="" border ref="multipleTable" :data="tableData1" tooltip-effect="dark"
                                  style="width: 100%" max-height="500px" @row-click="handleRow">
                            <el-table-column align="center" type="selection" width="55">
                            </el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="60">
                            </el-table-column>
                            <el-table-column align="center" prop="name" label="名称" width="130" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="number" label="资产编号" width="120">
                            </el-table-column>
                            <el-table-column align="center" prop="type" label="资产类型" width="130" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="category" label="资产类别" width="130"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="model" width="120" label="型号/规格">
                            </el-table-column>
                            <el-table-column align="center" prop="amount" width="120" label="购买金额">
                            </el-table-column>
                            <el-table-column align="center" prop="brand" width="90" label="品牌">
                            </el-table-column>
                            <el-table-column align="center" prop="buyTime" width="120" label="购买时间">
                            </el-table-column>
                            <el-table-column align="center" prop="buyChannel" width="120" label="购买渠道">
                            </el-table-column>
                            <el-table-column align="center" prop="warranty" width="100" label="保修时间">
                            </el-table-column>
                            <el-table-column align="center" prop="assetStatus" width="100" label="资产状态">
                            </el-table-column>
                            <el-table-column align="center" prop="assetParameters" width="100" label="资产参数">
                            </el-table-column>
                            <el-table-column align="center" prop="stockreal" width="100" label="变动记录">
                            </el-table-column>
                            <el-table-column align="center" prop="supplierDetails" width="150" label="供应商明细"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="owner" width="90" label="拥有者">
                            </el-table-column>
                            <el-table-column align="center" prop="creater" width="90" label="创建人">
                            </el-table-column>
                            <el-table-column align="center" prop="createTime" width="150" label="创建时间">
                            </el-table-column>
                            <el-table-column align="center" prop="updateTime" width="150" label="最近修改时间">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <div class="table-box" v-if="currentNav == 1">
                    <template>
                        <el-table border ref="multipleTable" :data="tableData2" tooltip-effect="dark"
                                  style="width: 100%" max-height="500px">
                            <el-table-column align="center" type="selection" width="55">
                            </el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="60">
                            </el-table-column>
                            <el-table-column align="center" prop="name" label="名称" width="130" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="number" label="资产编号" width="120">
                            </el-table-column>
                            <el-table-column align="center" prop="type" label="资产类型" width="130" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="category" label="资产类别" width="130"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="model" width="120" label="型号/规格">
                            </el-table-column>
                            <el-table-column align="center" prop="amount" width="120" label="购买金额">
                            </el-table-column>
                            <el-table-column align="center" prop="brand" width="90" label="品牌">
                            </el-table-column>
                            <el-table-column align="center" prop="buyTime" width="120" label="购买时间">
                            </el-table-column>
                            <el-table-column align="center" prop="buyChannel" width="120" label="购买渠道">
                            </el-table-column>
                            <el-table-column align="center" prop="warranty" width="100" label="保修时间">
                            </el-table-column>
                            <el-table-column align="center" prop="assetStatus" width="100" label="资产状态">
                            </el-table-column>
                            <el-table-column align="center" prop="assetParameters" width="100" label="资产参数">
                            </el-table-column>
                            <el-table-column align="center" prop="stockreal" width="100" label="变动记录">
                            </el-table-column>
                            <el-table-column align="center" prop="supplierDetails" width="150" label="供应商明细"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="owner" width="90" label="拥有者">
                            </el-table-column>
                            <el-table-column align="center" prop="creater" width="90" label="创建人">
                            </el-table-column>
                            <el-table-column align="center" prop="createTime" width="150" label="创建时间">
                            </el-table-column>
                            <el-table-column align="center" prop="updateTime" width="150" label="最近修改时间">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <div class="table-box" v-if="currentNav == 2">
                    <template>
                        <el-table border ref="multipleTable" :data="tableData3" tooltip-effect="dark"
                                  style="width: 100%" max-height="500px">
                            <el-table-column align="center" type="selection" width="55">
                            </el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="60">
                            </el-table-column>
                            <el-table-column align="center" prop="name" label="名称" width="130" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="number" label="资产编号" width="120">
                            </el-table-column>
                            <el-table-column align="center" prop="type" label="资产类型" width="130" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="category" label="资产类别" width="130"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="model" width="120" label="型号/规格">
                            </el-table-column>
                            <el-table-column align="center" prop="amount" width="120" label="购买金额">
                            </el-table-column>
                            <el-table-column align="center" prop="brand" width="90" label="品牌">
                            </el-table-column>
                            <el-table-column align="center" prop="buyTime" width="120" label="购买时间">
                            </el-table-column>
                            <el-table-column align="center" prop="buyChannel" width="120" label="购买渠道">
                            </el-table-column>
                            <el-table-column align="center" prop="warranty" width="100" label="保修时间">
                            </el-table-column>
                            <el-table-column align="center" prop="assetStatus" width="100" label="资产状态">
                            </el-table-column>
                            <el-table-column align="center" prop="assetParameters" width="100" label="资产参数">
                            </el-table-column>
                            <el-table-column align="center" prop="stockreal" width="100" label="变动记录">
                            </el-table-column>
                            <el-table-column align="center" prop="supplierDetails" width="150" label="供应商明细"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="owner" width="90" label="拥有者">
                            </el-table-column>
                            <el-table-column align="center" prop="creater" width="90" label="创建人">
                            </el-table-column>
                            <el-table-column align="center" prop="createTime" width="150" label="创建时间">
                            </el-table-column>
                            <el-table-column align="center" prop="updateTime" width="150" label="最近修改时间">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </div>
        </div>
        <!--统计抽屉-->
        <div class="statistics-box">
            <el-drawer custom-class="drawer-box" title="统计" size="600" :visible.sync="statisticsDrawer">
                <!--每日新增记录图表-->
                <div id="newRecord" class="mb20" ref="newRecord" style="width: 450px;height:310px;"></div>
                <div class="margin-line"></div>
                <!--变动记录图表-->
                <div id="category" class="p10" ref="category" style="width: 450px;height:300px;"></div>
            </el-drawer>
        </div>
        <!--打印弹框-->
        <el-dialog class="dialog-box" title="打印设置" :visible.sync="printDialogVisible" width="762">
            <div class="dialog-main clearfix">
                <div class="fl w50p dialog-left">
                    <div class="p20">
                        <el-form ref="form" :model="printForm" label-width="80px" label-position="top">
                            <el-form-item>
                                <el-select class="w100p" v-model="printForm.mode" placeholder="">
                                    <el-option label="A4纸打印" value="A4"></el-option>
                                    <el-option label="二维码打印机" value="QRcode"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="排版" v-if="printForm.mode == 'A4'">
                                <el-radio-group v-model="printForm.typeSetting">
                                    <el-radio class="pr40 pb20" label="1">1*1</el-radio>
                                    <el-radio class="pr40 pb20" label="2">1*2</el-radio>
                                    <el-radio class="pr40 pb20" label="3">2*2</el-radio>
                                    <el-radio class="pr40 pb20" label="4">2*5</el-radio>
                                    <el-radio class="pr40 pb20" label="5">3*6</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="排版" v-if="printForm.mode == 'QRcode'">
                                <el-radio-group v-model="printForm.typeSetting">
                                    <el-radio class="pr20 pb20" label="1">40mm*30mm</el-radio>
                                    <el-radio class="pr20 pb20" label="2">60mm*40mm</el-radio>
                                    <el-radio class="pr20 pb20" label="3">80mm*60mm</el-radio>
                                    <el-radio class="pr20 pb20" label="4">100mm*80mm</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <p class="c_3 mb10">显示文字</p>
                            <el-form-item class="pr" label="选择字段">
                                <span class="pa item-text">+添加字段</span>
                                <el-input v-model="printForm.field"></el-input>
                            </el-form-item>
                            <el-form-item label="自定义文字">
                                <el-input v-model="printForm.customize"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="fr w50p dialog-right">
                    <div class="">
                        <div class="m40 text-c" v-if="printForm.mode == 'A4'">
                            <img src="./img/A4-1V1.png" alt="" v-if="printForm.typeSetting == 1">
                            <img src="./img/A4-1V2.png" alt="" v-if="printForm.typeSetting == 2">
                            <img src="./img/A4_2V2.png" alt="" v-if="printForm.typeSetting == 3">
                            <img src="./img/A4-2V5.png" alt="" v-if="printForm.typeSetting == 4">
                            <img src="./img/A4-3V6.png" alt="" v-if="printForm.typeSetting == 5">
                        </div>
                        <div class="m40 text-c" v-if="printForm.mode == 'QRcode'">
                            <img src="./img/A4-1V1.png" alt="">
                        </div>
                        <span slot="footer" class="dialog-footer">
            <el-button @click="printDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="printDialogVisible = false">打印</el-button>
          </span>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--导出弹框-->
        <el-dialog class="dialog-box" title="导出Excel" :visible.sync="exportDialogVisible" width="34%">
            <div class="dialog-main clearfix export-dialog">
                <div class="dialog-title">将视图下数据导出为Excel</div>
                <p>导出字段</p>
                <div>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="allChecked" @change="handleCheckedFieldsChange">
                        <el-checkbox v-for="check in checkList" :label="check" :key="check">{{check}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <p>导出多条关联表记录</p>
                <div>
                    <el-checkbox>变动记录</el-checkbox>
                </div>
                <p>其他</p>
                <div>
                    <el-checkbox>列统计结果</el-checkbox>
                    <el-checkbox>记录分享链接</el-checkbox>
                </div>
                <div class="dialog-footer">
                    <el-button @click="exportDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="exportDialogVisible = false">导出</el-button>
                </div>

            </div>
        </el-dialog>
        <!--导入Excel-->
        <el-dialog class="dialog-box" title="上传Excel" :visible.sync="uploadDialogVisible" width="34%">
            <div class="dialog-main clearfix upload-dialog">
                <div class="explain">支持10MB以内的xls、xlsx文件,
                    最大行数不超过20000行，列数不超过200列；导入多选类型的控件，请确保Excel字段内各个选项/人员用“，”隔开，否则将无法正常识别数据
                </div>
                <div class="upload-file">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>选择文件</em></div>
                    </el-upload>
                </div>
                <div class="dialog-footer">
                    <el-button @click="uploadDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="uploadExcel">上传</el-button>
                </div>
            </div>
        </el-dialog>
        <!--详情-->
        <el-dialog class="dialog-box" title="详情" :visible.sync="detailDialogVisible" width="1300px">
            <div class="dialog-main clearfix detail-dialog">
                <div class="fl  base-detail">
                    <div class="head  clearfix ">
                        <span>{{rowValue.type}}</span>
                        <span class="fr">{{rowValue.creater}}创建于{{rowValue.createTime}}</span>
                    </div>
                    <div class="name">
                        <img src="@/assets/images/user.png"/><span>{{rowValue.name}}</span>
                    </div>
                    <el-form ref="form" :model="rowValue" label-width="86px">
                        <el-form-item label="名 称" class="w546">
                            <el-input v-model="rowValue.name"></el-input>
                        </el-form-item>
                        <el-form-item label="资产编号" class="w220">
                            <el-input v-model="rowValue.number"></el-input>
                        </el-form-item>
                        <el-form-item label="资产类型" class="w220">
                            <el-select v-model="rowValue.type">
                                <el-option label="硬件资产" value="硬件资产"></el-option>
                                <el-option label="软件资产" value="软件资产"></el-option>
                                <el-option label="数据资产" value="数据资产"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="资产类别" class="w220">
                            <el-select v-model="rowValue.category">
                                <el-option label="笔记本" value="笔记本"></el-option>
                                <el-option label="手机" value="手机"></el-option>
                                <el-option label="汽车" value="汽车"></el-option>
                                <el-option label="打印机" value="打印机"></el-option>
                                <el-option label="软件" value="软件"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="型号/规格" class="w220">
                            <el-input v-model="rowValue.model"></el-input>
                        </el-form-item>
                        <el-form-item label="购买金额" class="w220">
                            <el-input v-model="rowValue.amount"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌" class="w220">
                            <el-input v-model="rowValue.brand"></el-input>
                        </el-form-item>
                        <el-form-item label="购买时间" class="w220">
                            <el-input v-model="rowValue.buyTime"></el-input>
                        </el-form-item>
                        <el-form-item label="购买渠道" class="w220">
                            <el-input v-model="rowValue.buyChannel"></el-input>
                        </el-form-item>
                        <el-form-item label="保修时间" class="w220">
                            <el-input v-model="rowValue.warranty"></el-input>
                        </el-form-item>
                        <el-form-item label="资产状态" class="w220">
                            <el-select v-model="rowValue.assetStatus">
                                <el-option label="已领用" value="已领用"></el-option>
                                <el-option label="在库" value="在库"></el-option>
                                <el-option label="外借" value="外借"></el-option>
                                <el-option label="报废" value="报废"></el-option>
                                <el-option label="不可用" value="不可用"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="资产参数" class="w546">
                            <el-input type="textarea" v-model="rowValue.assetParameters"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商明细" class="w546">
                            <el-input type="textarea" v-model="rowValue.supplierDetails"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="fl  record-detail">
                    <el-button type="primary" class="btn">变动记录({{lines.length}})</el-button>
                    <div class="infomation">
                    	<div class="infomation-title">
                    		<span v-for="item in titles">{{item}}</span>
                    	</div>
                        <ul>
                            <li v-for="(item,index) in lines">
                            	<span class="serial-number">{{index+1}}</span>
                            	<span>{{item.changeMode}}</span>
                            	<span>{{item.changeTime}}</span>
                            	<span>{{item.handler}}</span>
                            	<span>{{item.user}}</span>
                            	<span>{{item.describe}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--新增资产-->
        <el-dialog class="dialog-box" title="创建资产" :visible.sync="createDialogVisible" width="680px">
            <div class="dialog-main detail-dialog create-asset">
                <div class="base-detail">
                    <el-form ref="form" :model="newAsset" label-width="86px">
                        <el-form-item label="名 称" class="w546">
                            <el-input v-model="newAsset.name"></el-input>
                        </el-form-item>
                        <el-form-item label="资产编号" class="w220">
                            <el-input v-model="newAsset.number"></el-input>
                        </el-form-item>
                        <el-form-item label="资产类型" class="w220">
                            <el-select v-model="newAsset.type">
                                <el-option label="硬件资产" value="硬件资产"></el-option>
                                <el-option label="软件资产" value="软件资产"></el-option>
                                <el-option label="数据资产" value="数据资产"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="资产类别" class="w220">
                            <el-select v-model="newAsset.category">
                                <el-option label="笔记本" value="笔记本"></el-option>
                                <el-option label="手机" value="手机"></el-option>
                                <el-option label="汽车" value="汽车"></el-option>
                                <el-option label="打印机" value="打印机"></el-option>
                                <el-option label="软件" value="软件"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="型号/规格" class="w220">
                            <el-input v-model="newAsset.model"></el-input>
                        </el-form-item>
                        <el-form-item label="购买金额" class="w220">
                            <el-input v-model="newAsset.amount"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌" class="w220">
                            <el-input v-model="newAsset.brand"></el-input>
                        </el-form-item>
                        <el-form-item label="购买时间" class="w220">
                            <el-date-picker
                                    v-model="newAsset.buyTime"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="购买渠道" class="w220">
                            <el-input v-model="newAsset.buyChannel"></el-input>
                        </el-form-item>
                        <el-form-item label="保修时间" class="w220">
                            <el-input v-model="newAsset.warranty"></el-input>
                        </el-form-item>
                        <el-form-item label="资产状态" class="w220">
                            <el-select v-model="newAsset.assetStatus">
                                <el-option label="已领用" value="已领用"></el-option>
                                <el-option label="在库" value="在库"></el-option>
                                <el-option label="外借" value="外借"></el-option>
                                <el-option label="报废" value="报废"></el-option>
                                <el-option label="不可用" value="不可用"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="资产参数" class="w546">
                            <el-input type="textarea" v-model="newAsset.assetParameters"></el-input>
                        </el-form-item>
                        <el-form-item label="变动记录" class="w546">
                            <el-input type="textarea" v-model="newAsset.record"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商明细" class="w546">
                            <el-input type="textarea" v-model="newAsset.supplierDetails"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="dialog-footer clearfix">
                        <div class="fl">
                            <el-checkbox v-model="checked">保存后继续创建下一条</el-checkbox>
                        </div>
                        <div class="fr">
                            <el-button @click="createDialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="createDialogVisible = false" v-if="!checked">确定
                            </el-button>
                            <el-button type="primary" @click="createDialogVisible = false" v-if="checked">下一条
                            </el-button>
                        </div>

                    </div>
                </div>

            </div>
        </el-dialog>
    </div>
</template>

<script src="./manage.js"></script>

<style scoped lang="scss">
    @import "manage";
</style>
